<template>
	<view>
		<!-- tab -->
		<me-tabs :tabs="list" @input="click" :value="value"></me-tabs>
		<!-- 地图 -->
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 300px;" show-location :latitude="latitude" :longitude="longitude"
					:markers="covers">
				</map>
			</view>
		</view>
		<!--  -->
		<view class="con">
			<view class="top">
				<view class="top1">
					<u-icon name="checkmark" size="140rpx"></u-icon>
					<text style="font-size: 32rpx;">打卡已完成</text>
				</view>
			</view>
			<view class="bottom">
				<!-- <xuan-timeLine ref="timeline" location="left" title=""></xuan-timeLine> -->
			</view>
		</view>
	</view>
</template>

<script>
	import meTabs from "@/components/me-tabs/me-tabs.vue";
	// import timeline from '@/components/chenbin-timeline/timeLine.vue'
	// import timelineItem from '@/components/chenbin-timeline/timelineItem.vue'
	// import xuanTimeLine from '@/components/xuan-timeLine/xuan-timeLine.vue'

	export default {
		comonents: {
			meTabs,
			// timeline,
			// timelineItem,xuanTimeLine
		},
		data() {
			return {
				list: [{
					name: '上下班打卡'
				}, {
					name: '外出打卡'
				}, {
					name: '考勤记录'
				}],
				value: "",
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 40.135667,
				longitude: 116.213747,
				covers: [{
					latitude: 40.139174,
					longitude: 116.213747,
					iconPath: '/static/ress.png',
					callout: { //自定义标记点上方的气泡窗口 点击有效
						content: this.distance < 200 ? '打卡' : '不可打卡', //文本
						color: '#ffffff', //文字颜色
						fontSize: 12, //文本大小
						borderRadius: 2, //边框圆角
						bgColor: this.distance < 200 ? '#00c16f' : '#ff0000', //背景颜色
						display: 'ALWAYS' //常显
					}
				}],
				time: 0,
				isclick: true,
				distance: 0
			};
		},
		onLoad() {
			this.getLocation()
			this.distance = this.getDistance(40.139174, 116.213747, this.latitude, this.longitude)
		},
		methods: {
			// 切换tabBar
			click(item) {
				console.log('item', item);
				this.value = item
			},
			position(e) {
				console.log(e)
			},
			getLocation() {
				let that = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置信息', res)

						that.latitude = res.latitude
						that.longitude = res.longitude

					},
					fail: function(res) {
						console.log('获取当前位置失败', res);
					}
				})
			},
			// 根据经纬度计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
			getDistance(lat1, lng1, lat2, lng2) {
				lat1 = lat1 || 0;
				lng1 = lng1 || 0;
				lat2 = lat2 || 0;
				lng2 = lng2 || 0;

				var rad1 = lat1 * Math.PI / 180.0;
				var rad2 = lat2 * Math.PI / 180.0;
				var a = rad1 - rad2;
				var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
				var r = 6378137;
				var distance = r * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) *
					Math.pow(Math.sin(b / 2), 2)));

				return distance;
			},
			//点击获取实时位置，映射到地图上
			toLocation() {
				console.log('当前地图', wx.createMapContext('myMap'))
				wx.createMapContext('myMap').moveToLocation()
			}
		}
	}
</script>

<style lang="scss">
	.con {
		width: 100%;

		.top {
			width: 100%;

			.top1 {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx;
				color: #29ac43;
			}
		}

		.bottom {
			.tripItem {
				height: 140rpx;
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
				border-radius: 10px;
				margin-bottom: 30rpx;

				.title {
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: rgba(51, 51, 51, 1);
				}

				.tips {
					font-size: 22rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(153, 153, 153, 1);
					margin-top: 20rpx;

				}
			}
		}
	}
</style>
